<template>
	<up-popup v-if="!!code.length" :show="!!code.length" round="24rpx" @close="close">
		<view class="tittle_zidian">{{tittle}}</view>
		<view class="search">
			<up-search
				shape="round"
				fontSize="24rpx"
				color="#888888"
				:placeholder="'请输入内容'"
				v-model.trim="inputValue"
				placeholderClass="placeholderClass"
				confirmType="搜索"
				@change="search"
				@search="search"
				@clear="clear"
				:showAction="false"
				bgColor="#efefef"
			></up-search>
		</view>
		<view class="listDict">
			<view class="font28" v-for="item in list" :key="item.name" @click="() => itemClick(item)">
				{{ code == 'country'?item.countryName:item.name }}
			</view>
		</view>
	</up-popup>
</template>

<script setup>
import { dictStore } from 'store/dicts.js';
const store = dictStore();
const list = ref([]);
const listCopy = ref([]);
const inputValue = ref('');
const props = defineProps({
	code: {
		type: String,
		},
	tittle:{
		type:String
	}
});
onReady(async()=>{
	const res = await store.getDict(props.code);
	list.value = res;
	listCopy.value = res;
})
const emit = defineEmits(['itemClick','close']);
const itemClick = (item) => {
	emit('itemClick',item);
};
const close = ()=>{
	emit('close','点关闭了');
}
const search = () => {
	list.value = listCopy.value.filter((item) => item.name.includes(inputValue.value));
};
const clear = () => {
	inputValue.value = '';
	list.value = listCopy.value;
};
</script>

<style lang="scss" scoped>
::v-deep .placeholderClass {
	width: 510rpx;
	height: 64rpx;
	background: #efefef;
}
.tittle_zidian{
	    text-align: center;
	    margin: 24rpx 0;
}
.listDict {
	margin-top: 16rpx;
	height: 70vh;
	overflow: auto;
	view {
		height: 96rpx;
		display: flex;
		align-items: center;
		margin-bottom: 2rpx;
		color: #222222;
		padding-left: 32rpx;
		background-color: #fff;
	}
	view:last-of-type {
		margin-bottom: 48rpx;
	}
}
.search {
	background-color: #fff;
	padding: 16rpx 32rpx;
}

</style>
